<!DOCTYPE html>
<html lang="en">
<head>
    <title>资源列表</title>
    <%include("/WEB-INF/views/common/basejs.html"){}%>
    <link rel="stylesheet" href="${ctxPath!}/css/admin.css" media="all">
    <!--行级别工具栏模板-->
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" onclick="addPage();" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="delAll">删除</button>
        </div>
    </script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--查询form区域-->
        <form id="queryForm" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">资源名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="resource_name" placeholder="请输入" autocomplete="off" class="layui-input" operator="like">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit="" lay-filter="queryForm">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                </div>
            </div>
        </form>
        <!--数据显示区-->
        <div class="layui-card-body">
            <table class="layui-hidden" id="treeTable" lay-filter="toolbar"></table>
        </div>
    </div>
</div>
<script>
    var ptable=null,treeGrid=null,tableId='treeTable',layer=null,$;
    var addPageIndex;//添加页面索引
    var editPageIndex;//编辑页面索引
    var queryForm;//查询表单
    layui.config({
        base: '../js/extend/treeGrid/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer','form'],function(){
        $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        queryForm=layui.form;
        //渲染treeGrid
        ptable=treeGrid.render({
            id:tableId
            ,elem: '#'+tableId
            ,toolbar:'#toolbar'
            ,idField:'id'
            ,url:basePath+'/resource/getList?paging=true'
            ,where:{page:1,limit:1000}
            ,cellMinWidth: 100
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'pid'//树形父id字段名称
            ,treeShowName:'resourceName'//以树形式显示的字段
/*            ,isOpenDefault:false//节点默认是展开还是折叠【默认展开】*/
/*            ,isFilter:false*/
            ,iconOpen:false//是否显示图标【默认显示】
            ,cols: [[
                 {type:'numbers'}
                ,{field:'resourceName',width:'20%' , title:'资源名称'}
                ,{field:'resourceUrl',width:'20%', title:'资源路径'}
                ,{field:'resourceDesc',width:'15%', title:'权限标识符'}
                ,{field:'sort',width:'5%', title:'排序'}
                ,{field:'type',width:'10%', title:'资源类型',
                    templet: function(d){
                        var str;
                        if(d.type==1){

                            str='<span class="layui-badge layui-bg-blue">菜单</span>';
                        }else if(d.type==2){
                            str='<span class="layui-badge layui-bg-orange">按钮</span>';
                        }else if(d.type==3){
                            str='<span class="layui-badge layui-bg-green">页面</span>';
                        }
                        return str;
                    }
                }
                ,{field:'status',width:'10%', title:'状态',
                    templet: function(obj){
                        if(obj.status==1){
                            return '<span class="layui-btn layui-btn-sm layui-btn-normal">有效</span>';
                        }else{
                            return '<span class="layui-btn layui-btn-sm layui-btn-danger">冻结</span>';
                        }
                    }
                    }
                ,{width:'15%',title:'操作',align:'center'
                    ,templet: function(d){
                        var html='';
                        var addBtn='<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>';
                        var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return addBtn+delBtn;
                    }
                }
            ]],
            done:function(){
              /* var tableBodyHeight=$(".layui-table-body>table").height();
              $(".layui-table-body").css("height",tableBodyHeight);*/
              /*  ptable.resize();
                layer.closeAll();*/
            }
        });
        //编辑和删除资源
        treeGrid.on('tool(toolbar)',function (obj){
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="edit"){//添加行
                editPage(obj.data.id);
            }
        });
        //新增
        treeGrid.on('toolbar(toolbar)',function (obj){
            if(obj.event === 'add'){//删除行
                layer.msg("新增");
            }
        });
        //绑定查询操作
        $("#queryButton").click(function(){
            alert("查询");
        });
        //查询表单
        queryForm.on('submit(queryForm)',function(data){
            var param=getCommonQueryData(data.field);
            param.page=1;
            param.limit=1000;
            ptable.reload({
                where: param
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });
    });

    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
            function(index){//确定回调
               $.ajax({
                    url:basePath+'/resource/delete',
                    type:'post',
                    data:{ids:obj.data.id},
                    dataType:'json',
                    success:function(data){
                        if(data.code==0){
                            obj.del();
                            layer.close(index);
                            layer.msg(data.msg);
                        }
                    },
                    error:function(){
                        layer.close(index);
                        layer.msg("删除节点失败,系统内部错误");
                    }
                });
            console.log(obj);

            },function (index) {//取消回调
                layer.close(index);
            }
        );
    }
    //弹出新增资源页面
    function addPage(){
        addPageIndex=layer.open({
                title:'新增资源',
                type: 2,
                content:basePath+'/resource/addPage',
                area: ['600px', '400px'],
                maxmin:true,
                btn: ['新增', '取消']
                ,yes: function(index, layero){
                var submit = layero.find('iframe').contents().find("#form-submit");
                submit.click();
                    }
            });
    }
    function editPage(id){
        editPageIndex=layer.open({
            title:'更新资源',
            type: 2,
            content:basePath+'/resource/editPage?id='+id,
            area: ['600px', '400px'],
            maxmin:true,
            btn: ['编辑', '取消']
            ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#form-submit");
            submit.click();
        }
        })
    }
    //表格重新加载
    function query() {
        treeGrid.query(tableId);
    }
    //关闭添加页面
    function closeAddPage(){
        layer.close(addPageIndex);
    }
    //关闭编辑页面
    function closeEditPage(){
        layer.close(editPageIndex);
    }
 /*   var i=1000000;
    //添加
    function print(){
        console.log(treeGrid.cache[tableId]);
        var loadIndex=layer.msg("对象已打印，按F12，在控制台查看！", {
            time:3000
            ,offset: 'auto'//顶部
            ,shade: 0
        });
    }
    function openorclose() {
        var map=treeGrid.getDataMap(tableId);
        var o= map['102'];
        treeGrid.treeNodeOpen(o,!o[treeGrid.config.cols.isOpen]);
    }

    function getCheckData() {
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
    }
    function getCheckLength(){
        var checkStatus = treeGrid.checkStatus(tableId)
            ,data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
    }*/
</script>
</body>
</html>